﻿<phone:PhoneApplicationPage 
    x:Class="WP7Square.FriendDetail"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="728" d:DesignWidth="480"
    shell:SystemTray.IsVisible="False"
>

    <Grid x:Name="LayoutRoot" Background="{StaticResource BackgroundBrush}">
        
        <Grid.RowDefinitions>
            <RowDefinition Height="0"/>
            <RowDefinition Height="168"/>
            <RowDefinition Height="304"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0">
        </Grid>

        <Grid Grid.Row="1">
            <StackPanel Orientation="Horizontal">
                <Image Height="128" Width="128" Margin="10 20" Source="{Binding PhotoUri}" VerticalAlignment="Top"/>
                <StackPanel Width="330">
                    <TextBlock Text="{Binding Name}" Margin="0" Style="{StaticResource PageTitleStyle}" />
                    <TextBlock Text="{Binding VenueDisplay}" Style="{StaticResource TripleLineListTitleTextStyleMedium}" TextWrapping="Wrap"/>
                    <TextBlock Text="{Binding Elapsed}" Style="{StaticResource TripleLineListTitleTextStyleSmall}"/>
                </StackPanel>
            </StackPanel>
        </Grid>

        <Grid Grid.Row="2">
            <StackPanel>
                <Border  BorderBrush="#ffa7a08c"
                     BorderThickness="2"
                     HorizontalAlignment="Center">
                    <Canvas x:Name="canvasMap" Width="460" Height="300">
                        <Image x:Name="imageMap" Width="460" Height="300"></Image>
                        <StackPanel Canvas.ZIndex="99" x:Name="panelLoading" Width="460" Height="300" Background="Black">
                            <TextBlock Margin="0 25 0 0" HorizontalAlignment="Center" Foreground="White" FontSize="32" Text="Loading..."></TextBlock>
                        </StackPanel>
                    </Canvas>
                </Border>
            </StackPanel>
        </Grid>

        <Grid Grid.Row="3" Margin="0 10 0 0">
            <ListBox Height="Auto" ItemsSource="{Binding Items}" Style="{StaticResource ListBoxStyle}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <StackPanel.OpacityMask>
                                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1, 0.5">
                                    <GradientStop Color="Black" Offset="0.85" />
                                    <GradientStop Color="Transparent" Offset="0.95" />
                                </LinearGradientBrush>
                            </StackPanel.OpacityMask>
                            <Image Height="44" Width="44" Margin="10" Source="{Binding PhotoUri}"/>
                            <StackPanel>
                                <TextBlock Width="370" Text="{Binding LineOne}" Style="{StaticResource DoubleLineListTitleTextStyle}"/>
                                <TextBlock Width="370" Text="{Binding LineTwo}" Style="{StaticResource DoubleLineListSubTitleTextStyle}"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </Grid>
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar x:Name="AppBar">
            <shell:ApplicationBar.Buttons>
                <shell:ApplicationBarIconButton IconUri="images/dark/phone.png" Click="ApplicationBarPhone_Click" Text="Call"/>
                <shell:ApplicationBarIconButton IconUri="images/dark/mail.png" Click="ApplicationBarEmail_Click" Text="Email"/>
                <shell:ApplicationBarIconButton IconUri="images/dark/compass.png" Click="ApplicationBarDirections_Click" Text="Locate"/>
            </shell:ApplicationBar.Buttons>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>